<template>
	<div id="note_container">
		<span id="note_title">{{note_data.marketAbbre}}</span>
		<el-row>
			<el-col :span="8">
				<label class="note_label">单号：</label>
			</el-col>
			<el-col :span="16">
				<div class="note_value">{{note_data.formNumber}}</div>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="8">
				<span class="note_label">档口名称：</span>
			</el-col>
			<el-col :span="16">
				<span class="note_value">{{note_data.boothName}}</span>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="8">
				<span class="note_label">档口编号：</span>
			</el-col>
			<el-col :span="16" >
				<span class="note_value">{{note_data.boothCode}}</span>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="8">
				<span class="note_label">销售时间：</span>
			</el-col>
			<el-col :span="16">
				<span class="note_value">{{note_data.formDateStr}}</span>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="8">
				<span class="note_label">单号：</span>
			</el-col>
			<el-col :span="16">
				<span class="note_value">{{note_data.formNumber}}</span>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="8">
				<span class="note_label">负责人：</span>
			</el-col>
			<el-col :span="16">
				<span class="note_value">{{note_data.manager}}</span>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="8">
				<span class="note_label">商品明细：</span>
			</el-col>
			<el-col :span="16">
				<el-col :span="24" class="section2" v-for="(hashdata,idx) in note_data.productInfoDTOList" :key="idx">
					<label class="note_label1">商品：</label>
					<label class="note_value1">{{hashdata.myProductName}} </label>
					</br>
					<label class="note_label1">产地：</label>
					<label class="note_value1">{{hashdata.place===""?"不详":hashdata.place}} </label>
					</br>
					<label class="note_label1">数量：</label>
					<label class="note_value1" v-if="ismarket">{{hashdata.suttleWeight===0?"保密":hashdata.suttleWeight + hashdata.unitName}}</label>
					<label class="note_value1" v-else>{{hashdata.total===0?"保密":hashdata.total + hashdata.unitName}}</label>
					<label class="note_label2">单价：</label>
					<label class="note_value1">{{hashdata.price===0?"保密":hashdata.price + "元"}}</label>
					</br>
					<label class="note_label1" v-if="ismarket">包装费：</label>
					<label class="note_value1" v-if="ismarket">{{hashdata.pacekagePrice}}元</label>
					<label class="note_label2" v-if="ismarket">过磅费：</label>
					<label class="note_value1" v-if="ismarket">{{hashdata.poundPrice}}元</label>
					<br v-if="ismarket"/>
					<label class="note_label1">小计：</label>
					<label class="note_value1" v-if="ismarket">{{(hashdata.suttleWeight * hashdata.price + hashdata.pacekagePrice + hashdata.poundPrice).toFixed(1)}}元 </label>
					<label class="note_value1" v-else>{{(hashdata.total * hashdata.price).toFixed(1)}}元</label>
				</el-col>
				<el-col :span="24" class="section3" v-if="ismarket">
					<label class="note_label1" v-if="ismarket">其他费用：</label>
					<label class="note_value1" v-if="ismarket">{{customCostsCount(note_data.customCostsDTOList)}}元</label>
				</el-col>
				<!-- <div class="clearfloat"></div> -->
			</el-col>
		</el-row>
		<vue-qr id="d2_code" :bgSrc='config.imagePath' :text="config.value" :size="this.getDpr(150)" :margin="0"></vue-qr>
		<!-- </br> -->

		<el-row>
			<el-col :span="7">
				<span class="note_label">总价格：</span>
			</el-col>
			<el-col :span="17">
				<span class="note_value">{{note_data.totalPrice}}元（已付款）</span>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="7">
				<span class="note_label">购货方：</span>
			</el-col>
			<el-col :span="17">
				<span class="note_value">{{note_data.contactName}}</span>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import Commonjs from "../utils/common.js"
	import VueQr from 'vue-qr'
	import fspic from "../assets/ttt.png"
	export default {
		components: {
			VueQr
		},
		props: {
			notedata: "",
			required:true
		},
		data() {
			return {
				note_data: "",
				downloadButton: false,
				config: {
					value: '',
					imagePath: fspic,
					size: 200,
					
					// filter: 'color'
				},
				ismarket: false
			}
		},
		mounted() {
			this.note_data = this.notedata.data
			if(this.note_data.marketAbbre === "广州江南果菜批发市场") {
				this.ismarket = true
			}
			// console.log(this.note_data.qrcodeLink)
			this.config.value = this.note_data.qrcodeLink
			// console.log(this.config.value.toString())
		},
		methods: {
			getDpr (s) {
		        var dpr = window.devicePixelRatio
		        // console.log(dpr)
		        return s * dpr
		    },
		    customCostsCount :function(list) {
				let count = 0
				list.forEach(function(i,index) {
					// console.log(i.costNum)
					count += i.costNum
				})
				return count
			}
		}
	};
</script>

<style scoped>
	.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;} 
	#a {
		float: left;
		display: inline-block;
		position: relative;
		/*height: 100px;*/
	}
	.section2 {
		/*float: left;*/
		/*height: 100px;*/
		position: relative;
		display: inline-block;
		border-top: solid 1px ;
		border-bottom: solid 1px ;
		margin-right: 0rem;
		margin-top: 0.1rem;
	}
	.section3 {
		position: relative;
		display: inline-block;
		margin-right: 0rem;
		margin-top: 0.1rem;
	}
	#note_container {
		width: 100%;
		max-height: 100%;
		overflow-y: auto;
		/*text-align: center;*/
	}
	#note_title {
		font-size: 0.5rem;
		text-align: center;
		display: block;
	}

	.note_label {
		font-size: 0.44rem;
		font-weight: normal;
		float: left;
		min-height: 0.6rem;
	}
	.note_value {
		font-size: 0.42rem;
		font-weight: normal;
		min-height: 0.6rem;
		line-height: 0.6rem;
	}
	.note_label1 {
		/*margin-left: 0.06rem;*/
		font-size: 0.35rem;
		font-weight: normal;
	}
	.note_label2 {
		margin-left: 0.14rem;
		font-size: 0.35rem;
		font-weight: normal;
	}
	.note_value1 {
		/*margin-left: 0.03rem;*/
		/*margin-left: -0.03rem;*/
		font-size: 0.32rem;
	}
	#d2_code {
		/*width: 3rem;
		height: 3rem;*/
		text-align: center;
		/*margin: 0 auto;*/
		margin-top: 0.2rem;
	}
</style>